<template>
    <div class="main el-box-init el-bkgd-white el-mg-20 el-pd-20">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button
                type="primary"
                icon="el-icon-plus"
                :size="$btnSize"
                v-if="isAuth('BBS_TALK_ADD')"
                @click="onAddOrReply()"
            >
                新增
            </el-button>
        </el-row>

        <el-table
            v-loading="table.loading"
            :data="table.list"
            :size="$tableSize"
            stripe
            border
            row-key="id"
            :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="id" label="ID" width="80">
                <template slot-scope="{ row }">
                    <span
                        :class="
                            !row.childrens && row.comment_level == 1
                                ? 'option-level0'
                                : ''
                        "
                    >
                        {{ row.id }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop="user_name" label="留言用户" width="100">
                <template slot-scope="{ row }">
                    {{ row.account }}
                    <span v-if="row.role_name"> ({{ row.role_name }}) </span>
                </template>
            </el-table-column>

            <el-table-column prop="content" label="留言内容">
                <template slot-scope="{ row }">
                    <div v-html="row.content"></div>
                </template>
            </el-table-column>

            <el-table-column
                prop="reply_user_name"
                label="被回复用户"
                width="100"
            >
                <template slot-scope="{ row }">
                    {{ row.reply_account }}
                    <span v-if="row.reply_role_name">
                        ({{ row.reply_role_name }})
                    </span>
                </template>
            </el-table-column>

            <el-table-column prop="reply_content" label="被回复内容">
                <template slot-scope="{ row }">
                    <div v-html="row.reply_content"></div>
                </template>
            </el-table-column>

            <el-table-column prop="created_time" label="留言时间" width="150">
                <template slot-scope="{ row }">
                    {{ row.created_time | formatTime }}
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                :width="$defaultActionWidth"
                align="center"
                fixed="right"
            >
                <template slot-scope="{ row }">
                    <el-button
                        size="mini"
                        type="warning"
                        icon="el-icon-edit-outline"
                        v-if="isAuth('BBS_TALK_REPLY')"
                        @click="onAddOrReply(row.id)"
                    >
                        回复
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        v-if="isAuth('BBS_TALK_DEL')"
                        @click="onDel(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="table.currentPage"
            :page-sizes="table.pageSizes"
            :page-size="table.pageSize"
            :layout="table.layout"
            :total="table.total"
            background
        >
        </el-pagination>

        <add-or-reply ref="addRefs" :id="table.rowId"></add-or-reply>
    </div>
</template>

<script>
import { talk as Api } from "api";
import AddOrReply from "./add-or-reply.vue";

export default {
    components: {
        AddOrReply,
    },
    data() {
        return {
            //表格
            table: {
                loading: false,
                rowId: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            const { code, data, msg } = await this.$axios.get(Api.getList, {
                params: {
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code == 200) {
                this.table.list = data.list;
                this.table.total = data.total;
            } else {
                this.$msg.error(msg);
            }
            // 关闭加载提示
            this.table.loading = false;
        },

        // 新增/回复
        onAddOrReply(id) {
            this.table.rowId = id;
            this.$refs.addRefs.visible = true; // 弹窗开关
        },
        // 删除回复
        async onDel(id) {
            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                }
            }
        },

        /* 每页多少条 */
        handleSizeChange(val) {
            this.table.loading = true;
            this.table.pageSize = val;
            this.getList();
        },

        /* 当前页  */
        handleCurrentChange(val) {
            this.table.loading = true;
            this.table.currentPage = val;
            this.getList();
        },
    },
};
</script>